<template>
  <div class="right-container" id="playback"></div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import playbackClass from "@/utils/playbackClass.js";

@Component
export default class extends Vue {
  PlaybackOCX: any = null;
  mounted() {
    let PlaybackOCX = this.init();
    PlaybackOCX.SetFitLayout(1);
    PlaybackOCX.setTokenCallEvent(this.tokenCallEvent.bind(this));
    PlaybackOCX.setCallBack();
  }
  // 初始化视频插件
  init() {
    let PlaybackOCX = (this.PlaybackOCX = new (playbackClass as any)({
      divId: "playback",
      theme: "",
    }));
    return PlaybackOCX;
  }

  // 播放视频列表
  shipinData: { [key: string]: string } = {};
  @Watch("shipinData")
  setPreview(shipinData) {
    this.getPreview();
  }
  // 获取视频流
  getPreview() {
    let form = this.shipinData;
    let id = this.shipinData.id || "";
    let indexCode = id.split("#")[0];
    let beginTime = new Date(form.beginTime).toJSON().slice(0, 10);
    let endTime = new Date(form.endTime).toJSON().slice(0, 10);
    if (beginTime) {
      beginTime = beginTime + "T00:00:00Z";
    }
    if (endTime) {
      endTime = endTime + "T00:00:00Z";
    }
    let data = {
      beginTime: beginTime,
      endTime: endTime,
      indexCode: indexCode,
      stationId: form.stationId,
      storeDeviceType: form.storeDeviceType,
    };
    // data = {
    //   beginTime: "2020-09-15T00:00:00Z",
    //   endTime: "2020-09-15T23:59:59Z",
    //   indexCode: "001315",
    //   stationId: "100435539",
    //   storeDeviceType: "0",
    // };
    (this as any).$services
      .getPlaybackInfoAction({ data, method: "post", dataType: "text" })
      .then((result: any) => {
        var playBackResult = this.PlaybackOCX.setPlayback(
          data.beginTime,
          data.endTime,
          result
        );
        if (playBackResult === this.PlaybackOCX.SUCCESS) {
          console.log("查询成功", result);
        } else {
          // console.log("查询失败，错误码为：" + playBackResult);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  tokenCallEvent(reqID) {
    let data = {
      // stationId: "100435539",
      stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PlaybackOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.right-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}
</style>

